<template>
  <div>
    <div>
      <el-form :inline="true" size="medium">
        <el-form-item label="地区">
          <el-select
            class="mr16"
            @change="getShiList"
            v-model="addressArr.sf"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in sfList"
              :key="item.district"
              :label="item.district"
              :value="item.district"
            ></el-option>
          </el-select>
          <el-select
            class="mr16"
            @change="getXianList"
            v-model="addressArr.shi"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in shiList"
              :key="item.district"
              :label="item.district"
              :value="item.district"
            ></el-option>
          </el-select>
          <el-select v-model="addressArr.xian" placeholder="全部" clearable>
            <el-option
              v-for="item in xianList"
              :key="item.district"
              :label="item.district"
              :value="item.district"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="加盟商名称"
            v-model="queryObj.query_value"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMainListReset"
            ><i class="iconfont icon-search"></i>查询</el-button
          >
          <el-button type="primary" size="medium" @click="goto2('')"><i class="iconfont icon-plus"></i>添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
      >
        <el-table-column label="加盟商ID">
          <template slot-scope="scope">
            {{scope.row.alliance_id}}
          </template>
        </el-table-column>
        <el-table-column label="公司名称">
          <template slot-scope="scope">
            {{scope.row.alliance_name}}
          </template>
        </el-table-column>
        <el-table-column label="所在地区">
          <template slot-scope="scope">
            {{scope.row.alliance_area}}
          </template>
        </el-table-column>
        <el-table-column label="联系人手机号">
          <template slot-scope="scope">
            {{scope.row.contacts_phone}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"
              >入驻信息</el-button
            >
            <el-button type="text" @click="setAccountInfo(scope.row)"
              >账户设置</el-button
            >
            <el-button type="text" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import allianceListAPI from "api/allianceBusinessMg/allianceListAPI";
import { pageSizeArr } from "common/config/constConfig";
import { mapMutations } from 'vuex';
import { getDistrictList } from "api/lineManagement/lineCommodity";

export default {
  components: {},
  computed: {},
  data() {
    return {
      showList: {
        1: "显示",
        0: "不显示"
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      auditList: [],
      dialogTableVisible: false,
      pageSizeArr,
      queryObj: {},
      mainList: [],
      seriesList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      },
      addressArr: {
        sf: "",
        shi: "",
        xian: "",
      },
      sfList: [],
      shiList: [],
      xianList: []
    };
  },
  methods: {
    ...mapMutations('middleData', ['setEvaluateObj']),
    goto(row) {
      let url = '/home/allianceDetail'
      if(row) {
        // .
        url += '?id=' + row.alliance_id
      }
      this.$router.push(url+'&type=look')
    },
    goto2() {
      let url = '/home/allianceDetail'
      this.$router.push(url)
    },
    setAccountInfo (row) {
      let url = '/home/alliancAccountInfo'
      if(row) {
        // .
        url += '?id=' + row.alliance_id
      }
      this.$router.push(url)
    },
    // 获取省份
    async getSfList() {
      let res = await getDistrictList({ pid: "1" });
      this.sfList = res.rData;
    },
    async getShiList(val) {
      this.addressArr.shi = '' 
      this.addressArr.xian = '' 
      let id = this.sfList.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.shiList = res.rData;
    },
    async getXianList(val) {
      this.addressArr.xian = ''
      let id = this.shiList.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.xianList = res.rData;
    },
    getMainListReset() {
      this.page.page = 1;
      this._mainList();
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._del(row)
      })
    },
    _del(row){
      allianceListAPI('del', {alliance_id: row.alliance_id}).then(res => {
        this._caozuoAfter(res.rMsg)
      })
    },
    _caozuoAfter(msg){
      this.$message({
        message: msg,
        type: 'success'
      })
      this._mainList()
    },
    // 获取
    _mainList() {
      let data = { ...this.queryObj };
      if(this.addressArr.sf) {
        let arr = []
        arr.push(this.addressArr.sf)
        if(this.addressArr.shi) {
          arr.push(this.addressArr.shi)
        }
        if(this.addressArr.xian) {
          arr.push(this.addressArr.xian)
        }
        data.area_name = arr.join('-')
      }
      data.pageInfo = { ...this.page };
      allianceListAPI('get', data).then(res => {
        let pageInfo = res.pageInfo;
        this.page.total = pageInfo.Total;
        this.page.page = pageInfo.page;
        this.mainList = res.rData;
      });
    },
  },
  created() {
    this._mainList();
    this.getSfList();
  }
};
</script>

<style lang="scss" scoped></style>
